<template>
    <div id="app">
        <main>
            <!-- 左侧导航 -->
            <div class="main-left">
                <div class="logo">
                    <img src="../../assets/image/car-publisher/menu_logo.png" width="80">
                </div>
                <el-row class="tac">
                    <el-col>
                        <el-menu
                                :default-active="rightdefault"
                                class="el-menu-vertical-demo"
                                @open="handleOpen"
                                @select="select"
                                @close="handleClose"
                                text-color="#BFCBD9"
                                active-text-color="#FF9E40">
                                <el-menu-item  index="概况" class="subPos" background-color="#304156" text-color="#fff" active-text-color="#fff">
                                    <template slot="title">
                                        <router-link to="/survey" class="e-m-item">
                                            <i class="iconfont icon-huodong3"></i>
                                            概况
                                        </router-link>
                                    </template>
                                </el-menu-item>
                                <el-menu-item  index="文章" class="subPos" background-color="#304156" text-color="#fff" active-text-color="#fff">
                                    <template slot="title">
                                        <router-link to="/article" class="e-m-item">
                                            <i class="iconfont icon-neirong"></i>
                                            文章
                                        </router-link>
                                    </template>
                                </el-menu-item>
                                <el-menu-item class="subPos" index="推广" background-color="#304156" text-color="#fff" active-text-color="#fff">
                                    <template slot="title">
                                        <router-link to="/extension" class="e-m-item">
                                            <i class="iconfont icon-huodong2"></i>
                                            推广
                                        </router-link>
                                    </template>
                                </el-menu-item>
                                <el-menu-item class="subPos" index="收入" background-color="#304156" text-color="#fff" active-text-color="#fff">
                                    <template slot="title">
                                        <router-link to="/finance" class="e-m-item">
                                            <i class="iconfont icon-qianbao"></i>
                                            收入
                                        </router-link>
                                    </template>
                                </el-menu-item>
                                <el-menu-item class="subPos" index="设置" background-color="#304156" text-color="#fff" active-text-color="#fff">
                                    <template slot="title">
                                        <router-link to="/setup" class="e-m-item">
                                            <i class="iconfont icon-shezhi"></i>
                                            设置
                                        </router-link>
                                    </template>
                                </el-menu-item>
                            <!--     <el-menu-item class="subPos" index="用户" background-color="#304156" text-color="#fff" active-text-color="#fff">
                                    <template slot="title">
                                        <router-link to="/inner/articles/demand" class="e-m-item">
                                            <i class="iconfont icon-neirong"></i>
                                            内部渠道-文章
                                        </router-link>
                                    </template>
                                </el-menu-item> -->
                            </el-menu>
                        </el-col>
                    </el-row>
                </div>
                <!-- 右侧主内容区 -->
            <div  class="main-right">
                <div class="right-top">
                    <div class="topLeft">{{titleName}}</div>
                    <div class="topRight">
                        <!--<div class="rightHome"><a href="http://www.docqbot.com " target="_blank">网站首页</a></div>-->
                        <div class="User">
                            <div class="UserImg">
                                <img class="image" :src="adminPhoto"/>
                            </div>
                            <div class="name">{{adminName}}</div>
                            <ul class="sub-menu">
                                <li class="sub-menu-item"><a href="javaScript:;" @click="gosetup">帐号管理</a></li>
                                <!-- <li class="sub-menu-item"><a>消息中心</a></li> -->
                                <li class="sub-menu-item"><a class="a" @click="exitSystem">退出</a></li>
                            </ul>
                        </div>
                        <div class="v_topRight" @click="gonotice"><p>消息</p><div v-if="unread!=null && unread!=''&&unread!=0">{{unread}}</div></div>
                    </div>
                    

                </div>
                <!--展示内容-->
                <div class="showBox">
                    <router-view></router-view>
                </div>
            </div>
        </main>
    </div>
</template>

<script>
    import {commonService} from '../../service/commonService.js'
    import axios from 'axios'
    export default {
        name: 'app',
        data: function (){
            return {
                active:true,
                titleName:'',
                adminPhoto: '',
                adminName: '',
                rightdefault:'',
                unread:'',
            }
        },
        mounted () {
            // 富文本编辑器，本地图片上传
            // localStorage.beforeA = axios.defaults.baseURL + '/ckFiles';
            // localStorage.afterB = 'http://' + window.location.host + '/editor/image';
            // 获得管理员信息
            this.getAdminInfo();
            this.getNoticeunread()
        },
        methods: {
            handleOpen(key, keyPath) {
                //console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                //console.log(key, keyPath);
            },
            select(key,keyPath,indexPath){
                //console.log(key,keyPath,indexPath._uid);
                this.titleName = key
            },
            gonotice:function(){
                  let that=this

                  that.$router.push({path:"/notice"})
                   setTimeout(() => {  
                  that.titleName='消息'
                  that.rightdefault=''
                  
                    },300)   
            },
            gosetup:function(){
                 let that=this

                 that.rightdefault=''
                // this.$router.push({name: 'personal'});
              that.$router.push({path:"/setup/personal"})
                setTimeout(() => {  
                  that.titleName='设置'
                  that.rightdefault='设置'
                },300)      
            },
            // 获取消息未读数
            getNoticeunread:function(){
                let that=this
               commonService.getNoticeunread().then(function(res){
                          if(res.data.code ==200){
                            that.unread=res.data.datas.number
                          }
               })
            },
            getAdminInfo () {
                let that=this;
                commonService.getUsersprofile().then(function(res){
                    //console.log('当前管理员信息', res);
                    if(res.data.success){
                        let obj = res.data.datas;
                        that.adminPhoto = that.$store.state.picHead + obj.headImg;
                        that.adminName = obj.name;
                        if(that.$route.path=='/'){
                            that.$router.push({name: 'survey'});
                            that.titleName='概况'
                            that.rightdefault='概况'
                        }
                        if(that.$route.path=='/home'){
                            that.$router.push({name: 'survey'});
                            that.titleName='概况'
                            that.rightdefault='概况'
                        }

                        if(that.$route.path=='/article/demand' || that.$route.path=='/article/submission'){
                            that.titleName='文章'
                            that.rightdefault='文章'
                        }
                         if(that.$route.path=='/extension/market' || that.$route.path=='/extension/mytuig'){
                            that.titleName='推广'
                            that.rightdefault='推广'
                        }
                         if(that.$route.path=='/finance' || that.$route.path=='/finance/income' || that.$route.path=='/finance/settlement' || that.$route.path=='/finance/bankcard'){
                            that.titleName='收入'
                            that.rightdefault='收入'
                        }
                         if(that.$route.path=='/setup/personal' || that.$route.path=='/setup/relation' || that.$route.path=='/setup/password'){
                            that.titleName='设置'
                            that.rightdefault='设置'
                        }
                          if(that.$route.path=='/survey'){
                            that.titleName='概况'
                            that.rightdefault='概况'
                        }
                       if(that.$route.path=='/notice'){
                            that.titleName='消息'
                            that.rightdefault=''
                        }
                         if(that.$route.path=='/writing'){
                            that.titleName='文章'
                            that.rightdefault='文章'
                        }
                         if(that.$route.path=='/promotiondetails'){
                            that.titleName='推广'
                            that.rightdefault='推广'
                        }

                    }else{
                        that.$message.error(res.data.message);
                    }
                })
            },
            // 退出
            exitSystem () {
                let that = this;
                commonService.deleteTokens().then(function (res) {
                    if(res.data.success){
                        localStorage.token = '';
                        that.$router.push({name: 'login'});
                    }else{
                        that.$message.error(res.data.message);
                    }
                });
            }
        }
    }
</script>

<style lang="less" scoped>
    @import "../../assets/css/icon/iconfont.css";
    body{margin: 0;}
    #app {
        min-width: 1200px;
        margin: 0 auto;
        font-family: "Helvetica Neue","PingFang SC",Arial,sans-serif;
    }

    /* 主内容区 */
    a{text-decoration: none;color: inherit;}
    main{  min-width: 1200px;  display: -webkit-box;  display: -ms-flexbox;  display: flex;  position:fixed; top:0;left:0;right:0;bottom:0;margin:auto;overflow:overlay; background-color: #FCFCFC;  }
    main .main-left{position:absolute;text-align: center;width: 181px;height:100%;float: left;background:#3A312E; overflow-y: overlay;}
    main .main-left::-webkit-scrollbar {display:none}
    main .main-left .logo{width:100%;height:60px;font-size:16px;font-weight: bold;line-height:60px;color:#BFCBD9; display: flex;justify-content: flex-start;align-items: center;}
    main .main-left .logo > img{margin-left: 20px;}
    main .main-left .el-menu{background:#3A312E;}
    .el-submenu .el-menu-item{min-width:180px;
      a{display:block;width:100%;height:100%;}
    }
    .el-menu-item.is-active{color:#fff !important;background:rgba(242,151,0,0.15);border-left: 3px solid #f29700;box-sizing: border-box;}
    .el-menu-item i{color: #f29700;}
    .el-menu-item-group{background:#1F2D3D;}
    /*.is-opened{background:#1F2D3D;}*/
    .el-submenu .el-menu-item:hover, .el-submenu__title:hover, .subPos:hover,.user-menu-item:hover{background:rgba(242,151,0,0.15);}
    .el-submenu .el-menu-item, .el-submenu__title, .subPos, .user-menu-item{color:#BFCBD9;text-align:left;}
    /* lxh */
    .subPos{display:flex;justify-content: flex-start;align-items: center;
        i{margin-right: 8px;}
        .e-m-item{width: 100%;display:flex;justify-content: flex-start;align-items: center;}
    }
    /* lxh */
    main .main-right{position: absolute;left:180px;right:0;top:0;bottom:0;margin:auto;-webkit-box-flex: 1;  -ms-flex: 1;  flex: 1;  background-color: #f9f9f9;overflow: overlay;}
    .right-top{width:100%;height:60px;border-bottom: 1px solid #e6e6e6;padding:0 40px;box-sizing: border-box;background-color: #fff;}
    .right-top .topLeft{width:300px;height:60px;line-height:60px;float:left;font-size: 14px;color:#97a8be;font-weight: bold;}
    .right-top .topRight{width:300px;height:60px;float:right;}
    .right-top .topRight .rightHome{width:100px;float:left;line-height:60px;}
    .right-top .topRight .User{width:140px;height:60px;line-height:60px;text-align: center;float:right;display:flex;justify-content: flex-end;align-items: center;}
    .right-top .topRight .User .UserImg{width:40px;height:40px;border-radius: 100%;float:left;border:2px solid #eeeeee;overflow:hidden;}
    .right-top .topRight .User .UserImg .image{width:100%;height:100%;}
    .right-top .topRight .User .name{float:left;width:80px; white-space: nowrap;text-overflow:ellipsis;overflow:hidden; text-align: center;color:#969896;line-height: 60px;font-size: 14px;}
    .right-top .v_topRight{height:20px;float:right;border-right: 1px solid #ccc;margin-top: 20px;
                            padding-right: 10px;cursor: pointer;
                        p{font-size: 14px;color: #666;float: left;line-height: 20px;}
                       
                        div{height: 16px;border-radius: 8px; padding:0 5px;color: #fff;font-size: 12px; float: left;background: #FF3831;margin-top: 2px;line-height: 16px;
                            margin-left: 6px;}
                        
                }
    .right-top{
        .topRight{
            .User{
                position:relative;
                .sub-menu{
                    width: 100%;border-left: 1px solid #eee;border-right: 1px solid #eee;
                    -webkit-box-sizing: border-box;
                    -moz-box-sizing: border-box;
                    box-sizing: border-box;
                    -webkit-border-radius: 4px;
                    -moz-border-radius: 4px;
                    border-radius: 4px;
                    position:absolute; top: 59px;left:-30px; z-index: 1;background:#fff;display:none;
                    .sub-menu-item{
                        height: 40px; line-height: 40px; border-bottom: 1px solid #eee;
                        .a{width:100%;height: 100%;display:block;}
                        .a:hover{cursor: pointer; color:#f29700;}
                    }
                }
            }
        }
    }
    .right-top .topRight .User:hover .sub-menu{display: block;}
    .user-menu-item{
      .el-submenu__title{display: flex;align-items: center;}
    }
    .el-submenu__title i{width:24px;height:18px;font-size:18px;color:#BFCBD9;}
</style>